<template>
  <div class="sidebar">
    <!-- 容纳左侧最新消息的容器 -->
    <h1><img src="@/assets/images/title_1.gif" alt="国内新闻" /></h1>
    <div class="side_list">
      <ul>
        <li v-for="news in newsList1" :key="news.nid">
          <router-link :key="news.nid"  :to="{ name: 'ReadNews', query: { id: news.nid } }">{{news.ntitle}}</router-link>
        </li>
      </ul>
    </div>
    <h1><img src="@/assets/images/title_2.gif" alt="国际新闻" /></h1>
    <div class="side_list">
      <ul>
        <li v-for="news in newsList2" :key="news.nid">
          <router-link  :to="{ name: 'ReadNews', query: { id: news.nid } }">{{news.ntitle}}</router-link>
        </li>
      </ul>
    </div>
    <h1><img src="@/assets/images/title_3.gif" alt="娱乐新闻" /></h1>
    <div class="side_list">
      <ul>
        <li v-for="news in newsList3" :key="news.nid">
          <router-link  :to="{ name: 'ReadNews', query: { id: news.nid } }">{{news.ntitle}}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexLeft",
  data() {
    return {
      tids: [1, 2, 5],
      newsList1: [],
      newsList2: [],
      newsList3: [],
    };
  },
  methods: {
    loadNews() {
      this.$axios({
        url: "/api/newsByPage",
        params: {
          tid: this.tids[0],
          pageNum: 1,
          pageSize: 5,
        },
      }).then((rs) => {
        this.newsList1 = rs.data.data.list;
      });
      this.$axios({
        url: "/api/newsByPage",
        params: {
          tid: this.tids[1],
          pageNum: 1,
          pageSize: 5,
        },
      }).then((rs) => {
        this.newsList2 = rs.data.data.list;
      });
      this.$axios({
        url: "/api/newsByPage",
        params: {
          tid: this.tids[2],
          pageNum: 1,
          pageSize: 5,
        },
      }).then((rs) => {
        this.newsList3 = rs.data.data.list;
      });
    },
  },
  created() {
    this.loadNews();
  },
};
</script>

<style scoped>
  .side_list{
    padding: 0.2em;
  }
  .side_list>ul>li{
    margin: 0.6em 0;
  }
</style>